<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
          * {
              margin: 0;
              padding: 0;
              font-family: '微软雅黑';
          }

          .box {
              width: 980px;
              margin: 100px auto;
          }

          .title {
              width: 100%;
              height: 40px;
              line-height: 40px;
              background-color: #ccc;
              font-size: 14px;
              font-family: '微软雅黑';
          }

          .title .bar {
              float: left;
          }

          .ckAll {
              margin-left: 20px;
          }

          .price {
              margin-left: 452px;
              margin-right: 100px;
          }

          .totle {
              margin-left: 100px;
              margin-right: 100px;
          }

          .content {
              width: 100%;
              margin: 10px 0;
          }

          .item {
              width: 100%;
              height: 100px;
              border: 1px solid #ccc;
              margin-bottom: 2px;
              box-sizing: border-box;
              position: relative;
          }

          .item .ck {
              position: absolute;
              top: 50%;
              left: 20px;
              transform: translateY(-50%);
          }

          .bot {
              width: 100%;
              height: 40px;
              line-height: 40px;
              background-color: #ccc;
              font-size: 14px;
              font-family: '微软雅黑';
          }

          .bot .ck {
              margin-left: 20px;
          }

          .active {
              background-color: #fff4e8;
          }

          .left {
              float: left;
          }

          .imgShow {
              border: 1px solid #ccc;
              margin-left: 80px;
              margin-top: 8px;
          }

          .text {
              margin-top: 8px;
              line-height: 40px;
              margin-left: 10px;
              font-size: 14px;

          }

          .s-price {
              line-height: 100px;
              margin-left: 42px;
              font-size: 14px;
              color: orange;
          }

          .num1 {
              width: 100px;
              height: 30px;
              border: 1px solid #ccc;
              margin-top: 30px;
              margin-left: 48px;
          }

          .sub {
              width: 20px;
              height: 30px;
              display: block;
              float: left;
              line-height: 30px;
              text-align: center;
              text-decoration: none;
              border-right: 1px solid #ccc;
              box-sizing: border-box;
          }

          .num1 input {
              border: 0 none;
              outline-style: none;
              width: 60px;
              height: 30px;
              float: left;
              text-align: center;
          }

          .add {
              width: 20px;
              height: 30px;
              display: block;
              float: left;
              line-height: 30px;
              text-align: center;
              text-decoration: none;
              border-left: 1px solid #ccc;
              box-sizing: border-box;
          }

          .t_price {
              line-height: 100px;
              font-size: 14px;
              margin-left: 40px;
              color: red;
          }

          .del {
              line-height: 100px;
              font-size: 14px;
              margin-left: 60px;
          }

          .del a {
              text-decoration: none;
              color: #888;
          }

          .del a:hover {
              color: orange;
          }

          .del_p {
              margin-left: 100px;
              color: #222;
              font-size: 14px;
              font-family: '微软雅黑';
              text-decoration: none;
          }

          .clear_p {
              margin-left: 245px;
              color: #222;
              font-size: 14px;
              font-family: '微软雅黑';
              text-decoration: none;
          }

          .product_num {
              margin-left: 196px;
          }

          .product_num strong {
              color: red;
          }

          .product_money {
              margin-left: 36px;
          }

          .product_money strong {
              color: red;
          }
    </style>
</head>
<body>
    <div class="box">
          <div class="title">

              <!-- 单价 -->
              <div class="bar price">单价</div>

              <!-- 数量 -->
              <div class="bar num">数量</div>

              <!-- 小计 -->
              <div class="bar totle">小计</div>

              <!-- 操作 -->
              <div class="bar done">操作</div>
          </div>
          <div class="content">
              <div class="item">

                  <!-- 图片展示 -->
                  <div class="imgShow left">
                      <img src="imgs/hr.jpg" alt="">
                  </div>

                  <!-- 文字内容 -->
                  <div class="text left">
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                  </div>

                  <!-- 单价 -->
                  <div class="s-price left">
                      &yen; <strong>1299.00</strong>
                  </div>

                  <!-- 数量 -->
                  <div class="num1 left">
                      <a href="javascript:;" class="sub">-</a>
                      <input type="text" value="1">
                      <a href="javascript:;" class="add">+</a>
                  </div>

                  <!-- 总结 -->
                  <div class="t_price left">
                      &yen;<strong>1299.00</strong>
                  </div>

                  <!-- 删除 -->
                  <div class="del left">
                      <a href="javascript:;">移除购物车</a>
                  </div>
              </div>
              <div class="item">

                  <!-- 图片展示 -->
                  <div class="imgShow left">
                      <img src="imgs/hr.jpg" alt="">
                  </div>

                  <!-- 文字内容 -->
                  <div class="text left">
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                  </div>

                  <!-- 单价 -->
                  <div class="s-price left">
                      &yen;<strong>1299.00</strong>
                  </div>

                  <!-- 数量 -->
                  <div class="num1 left">
                      <a href="javascript:;" class="sub">-</a>
                      <input type="text" value="1">
                      <a href="javascript:;" class="add">+</a>
                  </div>

                  <!-- 总结 -->
                  <div class="t_price left">
                      &yen;<strong>1299.00</strong>
                  </div>

                  <!-- 删除 -->
                  <div class="del left">
                      <a href="javascript:;">移除购物车</a>
                  </div>
              </div>
              <div class="item">

                  <!-- 图片展示 -->
                  <div class="imgShow left">
                      <img src="imgs/hr.jpg" alt="">
                  </div>

                  <!-- 文字内容 -->
                  <div class="text left">
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                      <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                  </div>

                  <!-- 单价 -->
                  <div class="s-price left">
                      &yen;<strong>1299.00</strong>
                  </div>

                  <!-- 数量 -->
                  <div class="num1 left">
                      <a href="javascript:;" class="sub">-</a>
                      <input type="text" value="1">
                      <a href="javascript:;" class="add">+</a>
                  </div>

                  <!-- 总结 -->
                  <div class="t_price left">
                      &yen;<strong>1299.00</strong>
                  </div>

                  <!-- 删除 -->
                  <div class="del left">
                      <a href="javascript:;">移除购物车</a>
                  </div>
              </div>
          </div>
          <div class="bot">



              <!-- 清空购物车 -->
              <a href="javascript:;" class="clear_p left">清空购物车</a>

              <!-- 商品总数 -->
              <div class="product_num left">
                  已购买
                  <strong>0</strong>
                  件商品
              </div>

              <!-- 商品总价 -->
              <div class="product_money left">
                  总价:
                  <strong>00.00</strong>
              </div>

          </div>
    </div>
    <script src="./jQuery.min.js"></script>
    <script>

        // 功能1: 点击加号
        // a) 当点击加号的时候,修改输入框中的值(+1)
        // b) 计算商品价格 = 前面的单价 X 当前输入框中的值
        // c) 将计算后的商品价格赋值给对应的小计标签
        // 代码实现
        $('.add').click(function(){
            // 获取当前加号对应的输入框中的值
            let v = Number($(this).siblings('input').val());
            // 将输入框中的值加1
                v++;
            // 将修改后的值赋值给输入框
            $(this).siblings('input').val(v);

            // 获取商品的单价
            let price = Number($(this).parent().siblings('.s-price').find('strong').text());
            // 商品总价
            let total_money = price * v;

            // 将总价赋值给对应的标签
            $(this).parent().siblings('.t_price').find('strong').text(total_money.toFixed(2));


            // 调用
            getCount();
        });

        // 功能2: 减号功能
        $('.sub').click(function(){
            // 获取当前加号对应的输入框中的值
            let v = Number($(this).siblings('input').val());

            if(v <= 0) {
                return;
            }
            v--;
            // 将修改后的值赋值给输入框
            $(this).siblings('input').val(v);

            // 获取商品的单价
            let price = Number($(this).parent().siblings('.s-price').find('strong').text());
            // 商品总价
            let total_money = price * v;
            // 将总价赋值给对应的标签
            $(this).parent().siblings('.t_price').find('strong').text(total_money.toFixed(2));


            // 调用
            getCount();
        });


        // 功能3: 统计商品总数量和总价
        function getCount() {
            // a) 统计总数量
            let res = $('.num1 input');
            let sum1 = 0;
            // 遍历
            $.each(res, function(index, item){
                sum1 += Number($(item).val());
            });
            // 将计算后的总数量显示到对应的标签中
            $('.product_num strong').text(sum1);


            // b) 统计总价格
            let res1 = $('.t_price strong');
            let sum2 = 0;
            // 遍历
            res1.each(function (index, item) { 
                sum2 += Number($(item).text());
            });
            // 将总价格赋值给对应的标签
            $('.product_money strong').text(sum2.toFixed(2));

        }
        getCount();

        // 功能4: 移除购物车
        $('.del a').click(function () { 
            $(this).parents('.item').remove();
            getCount();
        });

        // 功能5: 清空购物车()
        $('.clear_p').click(function(){
            $('.content').empty();
            getCount();
        });
    </script>
</body>
</html>